<script setup lang="ts">
import {reactive, ref} from "vue";
import myAxios from "../../../plugins/myAxios.ts";
import {Message} from "@arco-design/web-vue";
import {useRouter} from "vue-router";
import {useAdminStore} from "../../../stores/admin.ts";

const images = ref([
  'https://img.zcool.cn/community/01bc1f616f95ab11013e89433e8e9c.jpg',
  'https://img.zcool.cn/community/0166a6616f95aa11013f22cffbee0f.jpg',
  'https://img.zcool.cn/community/01e755616f95aa11013e8943b6db83.jpg',
  'https://img.zcool.cn/community/0194e0616f95a911013e89436b4cbf.jpg',
  'https://img.zcool.cn/community/01867c616f95a811013f22cf3ba3cd.jpg',
  'https://img.zcool.cn/community/012e30616f95a711013f22cf02b036.jpg',
  'https://img.zcool.cn/community/01dcb9616f95a611013e894325ac3a.jpg',
  'https://img.zcool.cn/community/01415e616f95a511013f22cf17d9b1.jpg',
  'https://img.zcool.cn/community/01acf5616f95a311013e89436c8cad.jpg'
])
const form = reactive({
  userEmail: '',
  password: '',
})
const router = useRouter();
const adminStore = useAdminStore();

const doLogin = () => {
  myAxios.post('/admin/login', form).then(res => {
    if (res.code === 0) {
      adminStore.setAdminUser(res.data);
      router.push('/welcome/home').then(() => {
        Message.success('登录成功')
      })
    }
  })
}
</script>

<template>
  <div id="login-view">
    <a-carousel
        indicator-type="slider"
        indicator-position="top"
        show-arrow="never"
        style="height: 100vh"
        :autoPlay="{interval: 2000}"
    >
      <a-carousel-item v-for="image in images">
        <img
            :src="image"
            :style="{
          width: '100%',
        }"
            alt=""/>
      </a-carousel-item>
    </a-carousel>
    <div class="login">
      <h1>神农百草后台管理系统</h1>
      <a-form :model="form" layout="horizontal">
        <a-form-item field="email">
          <a-input v-model="form.userEmail" placeholder="请输入邮箱">
            <template #prefix>
              <icon-email/>
            </template>
          </a-input>
        </a-form-item>
        <a-form-item field="password">
          <a-input-password v-model="form.password" placeholder="请输入密码">
            <template #prefix>
              <icon-email/>
            </template>
          </a-input-password>
        </a-form-item>
        <div class="submit">
          <a-button type="primary" long @click="doLogin">登录</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<style scoped>
#login-view {
  width: 100vw;
  height: 100vh;
}

:deep(.arco-input-wrapper) {
  width: 80%;
}

:deep(.arco-form-item-content-wrapper) {
  width: 90%;
}

.login {
  z-index: 10;
  position: absolute;
  top: 35%;
  left: 35%;
  width: 600px;
  opacity: 0.3;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
  -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0 6px 15px 0;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  color: rgba(255, 255, 255, 0.6);
  padding: 40px;
}

.login:hover {
  opacity: 1;
}

.login h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
  color: black;
  font-weight: 700;
}

.submit {
  text-align: center;
  margin: 0 21%;
}
</style>